<template>
  <view class="safe-box">
    <List  ref="list" refresherEnabled :scrollTop="scrollTop" @refresherrefresh="refresherrefresh">
      <view class="msg-item" v-for="item in list" :key="item._id" @click="()=>toChat(item.friend._id, item.friend.nickname)">
        <view class="avatar">
          <u-avatar size="50" :src="joinDomain(item.friend.avatar)">
          </u-avatar>
        </view>
        <view class="info">
          <view class="name line-clamp">{{item.friend.nickname}}</view>
          <view class="msg line-clamp">{{item.content}}</view>
        </view>
        <view class="notes">
          <!-- <text>
            {{item.createTime}}
          </text> -->
          <u-badge type="warning" max="99" :value="item.unreadMsgNum"></u-badge>
        </view>
      </view>
    </List>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // status: 'nomore',
        // list: [],
        scrollTop: 0
      }
    },
    computed: {
      user() {
        return this.$store.state.user
      },
      newMsg() {
        return this.$store.state.onlineMsg
      },
      list() {
        return this.$store.state.msgList
      }
    },
    // watch: {
    //   newMsg(newVal, oldVal) {
    //     // const newMsgId = newVal.fromUser?._id || newVal.fromUser
    //     this.list.some((item, i) => {
    //       console.log(item.user._id, newVal.fromUser._id)
    //       if (item.user._id === newVal.fromUser._id) {
    //         this.list[i].content = newVal.content
    //       }
    //       return item.user._id === newVal.fromUser._id
    //     })
    //   }
    // },
    methods: {
      async getList() {
        await this.$store.dispatch('getMsgList')
        console.log('getMsgList')
        this.list.some(item => {
          if (item.unreadMsgNum > 0) {
            uni.showTabBarRedDot({
              index: 2
            })
          } else {
            uni.hideTabBarRedDot({
              index: 2
            })
          }
          return item.unreadMsgNum > 0
        })
      },
      toChat(_id, nickname) {
        this.$store.commit('resetUnreadMsg', _id)
        this.$nav.to('/pages/chat/chat', {
          _id,
          nickname
        })
      },
      refresherrefresh() {
        this.$store.dispatch('getMsgList', {refresh: true}).then(() => {
          this.$tip.showToast('刷新成功！')
        }).catch(() => {
          this.$tip.showToast('刷新失败！')
        })
        
        this.$refs.list.closeRefresh()
      }
      // scrolltolower() {
      //   if (this.status !== 'nomore') {
      //     this.status = 'loading'
      //     this.query.index++
      //     this.getList()
      //   }
      // }
    },
    onShow() {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .list {
    overflow-y: auto;
  }

  .msg-item {
    display: flex;
    margin-bottom: 20rpx;

    .avatar {
      margin-right: 10rpx;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 6rpx 0;
      // align-items: center;
      .name {}

      .msg {
        color: $uni-text-color-grey;
        font-size: $me-font-size-base;
      }
    }

    .notes {
      font-size: 24rpx;
      color: $uni-text-color-grey;
    }
  }
</style>
